import { FC, useState, useEffect } from "react";

// 引入组件

// 轮播图
import Banner from '../../components/Banner'
// 面板
import Panel from "../../components/Panel";
// 商品卡片
import ContentCard from "../../components/ContentCard";
// 最新专题
import Special from "../../components/Special";

// 引入类型
import { NavListType } from "../../api/Banner/type";
import { newGood } from "../../api/Panel/type";
import { Result } from "../../api/ContentCard/type";
import { SpecialGoods } from "../../api/Special/type";
// 引入请求
import { reqNav } from "../../api/Banner";
import { reqNewGoods, reqRecommendGoods, reqHotBrandGoods } from "../../api/Panel";
import { reqOneGoods } from "../../api/ContentCard";
import { reqSpecial } from "../../api/Special";
// 引入资源
import styles from './styles.module.scss'
import { RightOutlined } from "@ant-design/icons";
const home: FC = () => {

    const [NavList, setNavList] = useState<NavListType[]>([])
    const [NewGoods, setNewGoods] = useState<newGood[]>([])
    const [RecommendGoods, setRecommendGoods] = useState<newGood[]>([])
    const [HotBrandGoods, setHotBrandGoods] = useState<newGood[]>([])
    const [OneGoods, setOneGoods] = useState<Result[]>([])
    const [SpecialGoods, setSpecialGoods] = useState<SpecialGoods[]>([])


    // 获取Nav
    const getNav = () => {
        reqNav().then((res) => {
            setNavList(res.result)

        })
    }

    // 获取新鲜好物
    const getNewGoods = () => {
        reqNewGoods().then((res) => {
            setNewGoods(res.result)
        })
    }
    // 获取人气推荐
    const getRecommendGoods = () => {
        reqRecommendGoods().then((res) => {
            setRecommendGoods(res.result)

        })
    }
    // 获取热门品牌
    const getHotBrandGoods = () => {
        reqHotBrandGoods().then((res) => {
            setHotBrandGoods(res.result)

        })
    }
    // 获取商品数据
    const getOneGoods = () => {
        reqOneGoods().then((res) => {
            setOneGoods(res.result)

        })
    }

    // 获取最新专题数据
    const getSpecial = () => {
        reqSpecial(3).then((res) => {
            setSpecialGoods(res.result)

        })
    }

    useEffect(() => {
        getNav()
        getNewGoods()
        getRecommendGoods()
        getHotBrandGoods()
        getOneGoods()
        getSpecial()
        return () => {

        }


    }, [])


    return (
        <div className={styles.home}>
            {/* 轮播图 */}
            <Banner NavList={NavList} />
            {/* 面版 */}
            {/* 新鲜好物 */}
            <Panel flag={1} PanelGoods={NewGoods} title="新鲜好物" subTitle="新鲜出炉 品质靠谱" >
                <label>查看全部<RightOutlined style={{ fontSize: 18 }} /></label>
            </Panel>
            <Panel flag={2} PanelGoods={RecommendGoods} title="人气推荐" subTitle="人气爆款 不容错过" >
            </Panel>
            <Panel flag={3} PanelGoods={HotBrandGoods} title="热门品牌" subTitle="国际经典 品质保证" >
            </Panel>
            {/* 商品分类 */}
            {
                OneGoods[0] ? <ContentCard Goods={OneGoods[0]}></ContentCard> : <span>加载中...</span>
            }
            {
                OneGoods[1] ? <ContentCard Goods={OneGoods[1]}></ContentCard> : <span>加载中...</span>
            }
            {
                OneGoods[2] ? <ContentCard Goods={OneGoods[2]}></ContentCard> : <span>加载中...</span>
            }
            {
                OneGoods[3] ? <ContentCard Goods={OneGoods[3]}></ContentCard> : <span>加载中...</span>
            }

            {/* 最新专题 */}
            <Special SpecialGoods={SpecialGoods} />

        </div>

    )
}

export default home